<template>
		<view class="contanier">
			<!-- 自定义悠米logo组件 -->
			<view class="usedColor">
				<ym-logo :ymLogo='"https://static01.imgkr.com/temp/4dd108bbc4254f229334ccfa9370dbdc.jpg"'
					:ymText='"https://static01.imgkr.com/temp/d5d5f8dd5f9943919e9e43f3e7347e66.png"'></ym-logo>
				<!-- 自定义搜索组件 -->
				<my-search @searchClick='gotoSearchDetails' :bgColor="'bgColor'"></my-search>
			</view>
			<!-- 蓝色背景 -->
			<view class="headerFooter"></view>
			<!-- 上线成功图片 -->
			<van-image src='https://static01.imgkr.com/temp/e20fbb824f834546a7b2d99df917e693.png' lazy-load
				use-loading-slot :width='wxWindowWidth-33' height='110' class='popUpOnline' radius='8px'>
				<van-loading slot="loading" type="spinner" size="20" vertical class='usedPopUpimage' />
				<text slot="error">加载失败</text>
			</van-image>
			<!-- 分类 -->
			<view class="used-classify">
				<view class="user-classify-item" v-for="item in usedClassificationOfGoods" :key='item.familyId'
					@click="gotousedSearch(item.familyName)">
					<van-image :src="item.familyImage" width='51' height='51' lazy-load use-loading-slot>
						<van-loading slot="loading" type="spinner" size="20" vertical />
						<text slot="error">加载失败</text>
					</van-image>
					<text>{{item.familyName}}</text>
				</view>
			</view>
			<!-- 易加推荐 -->
			<view class="used-recommend">
				<h1>易加推荐</h1>
				<nav-list :navList="navList" :active="active" :navListWidth="125"
					@clickIndex="getClickIndexHandle"></nav-list>
			</view>
			<drag-Add @dragClick='goIssueUsed'></drag-Add>
			<!-- 易加推荐商品列表 -->
			<!-- <scroll-view class="content" v-show="active === 0" :style="{height:contentHeight + 'px'}" enhanced scroll-y enhanced :show-scrollbar="false"
				@scrolltolower="lowerBottom('used')" refresher-enabled  @refresherrefresh="refresherrefreshHandle('aa')" :refresher-triggered="pullDownState"> 
					<waterfallsflow :wfList='usedArray' @itemTap='itemTap'></waterfallsflow>

			</scroll-view> -->
			<scroll-view class="content" v-show="active === 0" :style="{height:contentHeight + 'px'}"
				@scrolltolower="lowerBottom('newes')" refresher-enabled @refresherrefresh="refresherrefreshHandle('bb')" :refresher-triggered="pullDownState">
				<waterfallsflow :wfList='newestArray' @itemTap='itemTap'></waterfallsflow>
				<view
					v-if="hottestQueryObj.totalPageNumber >= 1 && hottestQueryObj.pagenum == hottestQueryObj.totalPageNumber && !requestState"
					class="noData">
					已全部加载
				</view>
				<!-- 加载中 -->
				<view v-show="requestState && !pagingState && !pullDownState" class="paging">
					<van-loading size="24px">加载中...</van-loading>
				</view>
				<view v-if="newestArray.length === 0 && !requestState " class="noAttention">
					<van-empty description="暂无最新文章"></van-empty>
				</view>
			</scroll-view>
			<scroll-view class="content" v-show="active === 1" :style="{height:contentHeight + 'px'}"
				@scrolltolower="lowerBottom('hottest')" refresher-enabled @refresherrefresh="refresherrefreshHandle('cc')" :refresher-triggered="pullDownState">
				<waterfallsflow :wfList='hottestArray' @itemTap='itemTap'></waterfallsflow>
				<view
					v-if="communityQueryObj.totalPageNumber >= 1 && communityQueryObj.pagenum == communityQueryObj.totalPageNumber && !requestState"
					class="noData">
					已全部加载
				</view>
				<!-- 加载中 -->
				<view v-show="requestState && !pagingState && !pullDownState" class="paging">
					<van-loading size="24px">加载中...</van-loading>
				</view>
				<view v-if="hottestArray.length === 0 && !requestState " class="noAttention">
					<van-empty description="暂无最热文章"></van-empty>
				</view>
			</scroll-view>
		</view>
</template>

<script>
	import {
		capsuleTopHeight
	} from "../../mixins/mixins.js"
	export default {
		mixins: [capsuleTopHeight],
		data() {
			return {
				// defaultPic:'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png',
				active: 0,//当前选中项
				contentHeight: 0,// 屏幕高度
				wxWindowWidth: undefined,// 屏幕宽度
				// 易加推荐标题列表
				navList: [
					{
						text: "最新",
						id: '02'
					},
					{
						text: "最热",
						id: '03'
					}
				],
				usedClassificationOfGoods: [],// 商品分类列表
				initState: false,// 判断本地存储token状态
				
				// usedArray: [],//二手推荐商品列表
				// // 数据分页
				// usedQueryObj: {
				// 	pagenum: 1,//当前请求页数
				// 	totalPageNumber: 1,//分页数
				// 	pagesize: 0, // 每页请求的数量
				// 	total: 1,//总数据条数
				// },
				
				
				newestArray: [],
				// 数据分页
				newestQueryObj: {
					pagenum: 1,
					totalPageNumber: 1,
					pagesize: 0, 
					total: 1,
				},
				
				hottestArray: [],
				hottestQueryObj: {
					pagenum: 1,
					totalPageNumber: 1,
					pagesize: 0,
					total: 1,
				},
				requestState: false,// 请求状态
				pagingState:false,//分页请求状态
				pullDownState:false,//当前刷新
			};
		},
		onShow() {
			if (uni.getStorageSync("userObj").token) {
				if (!this.initState) {
					this.initState = true
					this.getUsedRecommendClassify() // 社区滚动标题请求
					// this.getUsedrecommendContent() // 社区初始数据
					this.getUsedNewest()
					this.getUsedHottestt()
				}
			} else {
				uni.switchTab({
					url: '../my/my'
				})
				uni.showToast({
					title: '请先登录用户',
					duration: 1000,
					icon: 'none'
				})
			}
		},
		created() {
			this.screenHeight() //屏幕高度
			this.screenWidth()//屏幕宽度
		},
		methods: {
			//屏幕宽度
			screenWidth(){
				let width = uni.getSystemInfoSync().windowWidth
				this.wxWindowWidth = width
			},
			// 屏幕高度
			screenHeight() {
				const wxWindowHeight = uni.getSystemInfoSync().windowHeight
				this.contentHeight = wxWindowHeight - this.capsuleHeight - this.capsuleTop - 340
			},
			// 二手发布
			goIssueUsed(){
				uni.navigateTo({
					url: '/subpkg/issue-used/issue-used',
				});
			},
			// 分类跳转
			gotousedSearch(usedName) {
				uni.navigateTo({
					url: `../../subpkg/used-comment/used-comment?usedName=${usedName}`
				})
			},
			// 推荐详情
			itemTap(item) {
				uni.navigateTo({
					url: `../../subpkg/product-details/product-details?id=${item.intactGoodsId}`
				})
			},
			// 搜索跳转
			gotoSearchDetails() {
				uni.navigateTo({
					url: '/subpkg/used-comment/used-comment'
				})
			},
			//获取二手页面分类标题
			async getUsedRecommendClassify() {
				const {
					data: res
				} = await uni.$http.get(`/ym_server/IntactGoods/family`)
				if (res.code !== 200) return uni.$showMsg()
				this.usedClassificationOfGoods = res.data.list.reverse()
			},
			// 二手综合
			// async getUsedrecommendContent(timeOutState = true) {
			// 	this.requestState = true
			// 	const {
			// 		data: res
			// 	} = await uni.$http.get(`/ym_server/IntactGoods/0?page=${this.usedQueryObj.pagenum}`)
			// 	if (res.code === 200 && res.data.list.records) {
			// 		setTimeout(()=>{
			// 			this.usedQueryObj.totalPageNumber = res.data.list.pages;
			// 			this.usedQueryObj.pagesize = res.data.list.pageSize;
			// 			this.usedQueryObj.total = res.data.list.total;
			// 			this.usedArray = [...this.usedArray, ...res.data.list.records || []];
			// 		},500)
						
			// 	} else {
			// 		this.usedArray = []
			// 		this.usedQueryObj.totalPageNumber = 0
			// 		this.usedQueryObj.pagesize = 0
			// 		this.usedQueryObj.total = 0
			// 	}

			// 	if(timeOutState){
			// 		setTimeout(()=>{
			// 			this.requestState = false
			// 			this.pullDownState=false
			// 		},500);
			// 	}else{
			// 		this.requestState = false
			// 		this.pullDownState=false
			// 	}
			// },
			//二手最新
			async getUsedNewest(timeOutState = true) {
				this.requestState = true
				const {
					data: res
				} = await uni.$http.get(`/ym_server/IntactGoods/1?page=${this.newestQueryObj.pagenum}`)
				if (res.code === 200 && res.data.list.records) {
					setTimeout(()=>{
						this.newestQueryObj.totalPageNumber = res.data.list.pages;
						this.newestQueryObj.pagesize = res.data.list.pageSize;
						this.newestQueryObj.total = res.data.list.total;
						this.newestArray = [...this.newestArray, ...res.data.list.records || []];
					},500)
					
				} else {
					this.newestArray = []
					this.newestQueryObj.totalPageNumber = 0
					this.newestQueryObj.pagesize = 0
					this.newestQueryObj.total = 0
				}
				if(timeOutState){
					setTimeout(()=>{
						this.requestState = false
						this.pullDownState=false
					},500);
				}else{
					this.pullDownState=false
					this.requestState = false
				}
			},
			// 二手最热
			async getUsedHottestt(timeOutState = true) {
				this.requestState = true
				const {
					data: res
				} = await uni.$http.get(`/ym_server/IntactGoods/2?page=${this.hottestQueryObj.pagenum}`)
				if (res.code === 200 && res.data.list.records) {
					setTimeout(()=>{
						this.hottestQueryObj.totalPageNumber = res.data.list.pages;
						this.hottestQueryObj.pagesize = res.data.list.pageSize;
						this.hottestQueryObj.total = res.data.list.total;
						this.hottestArray = [...this.hottestArray, ...res.data.list.records || []];
					},500)
				} else {
					this.hottestArray = []
					this.hottestQueryObj.totalPageNumber = 0
					this.hottestQueryObj.pagesize = 0
					this.hottestQueryObj.total = 0
				}
				if(timeOutState){
					setTimeout(()=>{
						this.pullDownState=false
						this.requestState = false
					},500);
				}else{
					this.pullDownState=false
					this.requestState = false
				}
			},
			getClickIndexHandle(index) {
				if(index === this.active && this.active===0){
					// this.pullDownState = true
					// this.requestState=true
					// this.pagingState=false
					// this.usedArray=[]
					// this.usedQueryObj.pagenum=1
					// this.usedQueryObj.totalPageNumber=0
					// this.usedQueryObj.pagesize=0
					// this.usedQueryObj.total=0
					// this.getUsedrecommendContent()
					this.pullDownState = true
					this.requestState=true
					this.pagingState=false
					this.newestArray=[]
					this.newestQueryObj.pagenum=1
					this.newestQueryObj.totalPageNumber=0
					this.newestQueryObj.pagesize=0
					this.newestQueryObj.total=0
					this.getUsedNewest()
				}else if(index === this.active && this.active===1){
					// this.pullDownState = true
					// this.requestState=true
					// this.pagingState=false
					// this.newestArray=[]
					// this.newestQueryObj.pagenum=1
					// this.newestQueryObj.totalPageNumber=0
					// this.newestQueryObj.pagesize=0
					// this.newestQueryObj.total=0
					// this.getUsedNewest()
					this.pullDownState = true
					this.requestState=true
					this.pagingState=false
					this.hottestArray=[]
					this.hottestQueryObj.pagenum=1
					this.hottestQueryObj.totalPageNumber=0
					this.hottestQueryObj.pagesize=0
					this.hottestQueryObj.total=0
					this.getUsedHottestt()	
				}
				// }else if(index === this.active && this.active===2){
				// 	// this.pullDownState = true
				// 	// this.requestState=true
				// 	// this.pagingState=false
				// 	// this.hottestArray=[]
				// 	// this.hottestQueryObj.pagenum=1
				// 	// this.hottestQueryObj.totalPageNumber=0
				// 	// this.hottestQueryObj.pagesize=0
				// 	// this.hottestQueryObj.total=0
				// 	// this.getUsedHottestt()				
				// }
				this.active = index
			},
			refresherrefreshHandle(type){
				if (this.pullDownState) return
				this.pullDownState=true
				this.pagingState=false
				// if(type==='aa'){
				// 	this.usedArray=[]
				// 	this.usedQueryObj.pagenum=1
				// 	this.usedQueryObj.totalPageNumber=0
				// 	this.usedQueryObj.pagesize=0
				// 	this.usedQueryObj.total=0
				// 	setTimeout(()=>{
				// 		this.pullDownState=false
				// 	},500);
				// 	setTimeout(()=>{
				// 		this.getUsedrecommendContent()
				// 	},500)
					
				// }
				// else 
				if(type==='bb'){
					this.newestArray=[]
					this.newestQueryObj.pagenum=1
					this.newestQueryObj.totalPageNumber=0
					this.newestQueryObj.pagesize=0
					this.newestQueryObj.total=0
					setTimeout(()=>{
						this.pullDownState=false
					},500);
					setTimeout(()=>{
						this.getUsedNewest()
					},500)
					
				}else{
					this.hottestArray=[]
					this.hottestQueryObj.pagenum=1
					this.hottestQueryObj.totalPageNumber=0
					this.hottestQueryObj.pagesize=0
					this.hottestQueryObj.total=0
					setTimeout(()=>{
						this.pullDownState=false
					},500);
					setTimeout(()=>{
						this.getUsedHottestt()
					},500)
					
				}
			},
			lowerBottom(type) {
				if(this.requestState) return
				if(type==='newes'){
					if(this.newestQueryObj.pagenum <this.newestQueryObj.totalPageNumber){
						this.newestQueryObj.pagenum++
						this.getUsedNewest(false)
					}
				}else{
					if(this.hottestQueryObj.pagenum <this.hottestQueryObj.totalPageNumber){
						this.hottestQueryObj.pagenum++
						this.getUsedHottestt(false)
					}
				}
			},
		}
	}
</script>

<style lang="scss">
	.paging {
		width: 100%;
		margin: 20upx 0upx;
		text-align: center;
		color: #AEAEAE;
		font-size: 24upx;
	}
	.noData {
		width: 100%;
		text-align: center;
		padding: 40upx 0upx;
		color: #AEAEAE;
		font-size: 24upx;
		border-top:solid #EEF2F4 1px;
	}
	.noAttention {
		width: 100%;
		text-align: center;
		line-height: 200upx;
		color: #AEAEAE;
	}
	.usedPopUpimage {
		margin: auto;
	}
	.paging {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 20upx 0upx;
		text-align: center;
		color: #AEAEAE;
		font-size: 24upx;
	}
	html {
		background: #fff !important;
	}
	.bottomShow {
		text-align: center;
		font-size: 22upx;
		color: #AEAEAE;
		margin-bottom: 40upx;
	}
	.van-tabs__scroll--line {
		background: bottom !important;
	}
	.contanier {
		.usedColor {
			width: 100%;
			height: 360upx;
			background: #3FD3D1;
			overflow: hidden;
		}

		.headerFooter {
			width: 100%;
			height: 80rpx;
			background: #3FD3D1;
			border-radius: 0rpx 0rpx 50% 50%;
		}

		.popUpOnline {
			width: 684upx;
			display: block;
			margin: auto;
			margin-top: -98upx;
			margin-bottom: 38upx;
		}

		.used-classify {
			width: 684upx;
			height: 135upx;
			margin: auto;
			display: flex;

			.user-classify-item {
				width: 23%;
				height: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				>image {
					width: 51px;
					height: 51px;
				}

				text {
					font-size: 24upx;
				}
			}
		}

		.used-recommend {
			width: 684upx;
			height: 65upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 24upx auto 24upx;

			h1 {
				font-size: 40upx;
				font-weight: 500;
			}
		}

		scroll-view {
			h1 {
				text-align: center;
			}
		}
	}

	.Center {
		margin-left: 20upx;
		margin-right: 20upx;
	}

	.bottom-items {
		border-bottom: 2px solid #000;
	}
</style>